/**
 * @fileoverview Help for Coding in Chrome editor.
 *
 * @license Copyright 2015 The Coding with Chrome Authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * @author mbordihn@google.com (Markus Bordihn)
 */
{namespace cwc.soy.ui.Help autoescape="strict"}


/**
 * About Coding with Chrome.
 */
{template .about}
  {@param prefix: string}
  {@param manifest: ?}
  <img src="images/cwc_logo.png" alt="{$manifest['name']}"
    style="display: block; margin: auto; height: 200px;">
  <p>
    <span id="{$prefix}version-link" class="goog-link">Version {$manifest['version']}</span><br/>
    Use of the <a href="http://codingwithchrome.foo" target="_blank" class="goog-link">Coding with Chrome</a> is governed by <a href="https://www.google.com/intl/en/policies/" target="_blank" class="goog-link">Google Terms of Service and Privacy Policy</a>.<br/>
    Copyright 2015 The Coding with Chrome Authors.<br/>
  </p>
  <p>
    Made possible by the open-source-project&nbsp;
    <a href="https://github.com/google/coding-with-chrome" target="_blank" class="goog-link">Coding with Chrome</a>&nbsp;
    and other&nbsp;<span id="{$prefix}notice-link" class="goog-link">open source software</span>.
  </p>
{/template}


/**
 * Intro video.
 */
{template .intro}
  <webview style="width: 720px; height: 450px;" src="https://www.youtube-nocookie.com/embed/yZtNeoSObdA?rel=0&amp;controls=0" frameborder="0"></webview>
{/template}


/**
 * Notice information.
 */
{template .notice}
  {@param prefix: string}
  {@param is_chrome_app: bool}

  {if $is_chrome_app}
    <webview id="{$prefix}webview-notice" partition="static"
      src="../NOTICE.html" style="width: 600px; height: 500px;"></webview>
  {else}
    <iframe id="{$prefix}webview-notice"
      src="../NOTICE.html" style="width: 600px; height: 500px;"></iframe>
  {/if}
{/template}


/**
 * About Coding with Chrome.
 */
{template .help}
  <div class="large">

    <h3>Keyboard shortcuts</h3>
    <p>
      There are different keyboard shortcuts for the different functions of the editor.
    </p>

    <h4>General keyboard shortcuts</h4>
    <dl>
      <dt>Ctrl-N</dt><dd>New file</dd>
      <dt>Ctrl-O</dt><dd>Open file...</dd>
      <dt>Ctrl-S</dt><dd>Save file...</dd>
      <dt>Ctrl-Shift-S</dt><dd>Save file as...</dd>
      <dt>Ctrl-Return</dt><dd>Execute / run preview</dd>
    </dl>

    <h4>Code / Text Editor specific shortcuts</h4>
    <p>
      The following keyboard shortcuts will only work inside the code or text editor.
    </p>
    <dl>
      <dt>Ctrl-Space / Cmd-Space</dt><dd>Autocomplete</dd>
      <dt>Ctrl-F / Cmd-F</dt><dd>Start searching</dd>
      <dt>Ctrl-G / Cmd-G</dt><dd>Find next</dd>
      <dt>Shift-Ctrl-G / Shift-Cmd-G</dt><dd>Find previous</dd>
      <dt>Shift-Ctrl-F / Cmd-Option-F</dt><dd>Replace</dd>
      <dt>Shift-Ctrl-R / Shift-Cmd-Option-F</dt><dd>Replace all</dd>
    </dl>

    <h4>Roboter specific shortcuts</h4>
    <p>
      The following keyboard shortcuts could be used to control an robot.<br>
      These are only enabled in the monitor screen and the control screen.
    </p>
    <dl>
      <dt>Up</dt><dd>Moves the robot forward</dd>
      <dt>Down</dt><dd>Moves the robot backwards</dd>
      <dt>Left</dt><dd>Rotates / moves the robot left</dd>
      <dt>Right</dt><dd>Rotates / moves the robot right</dd>
      <dt>Shift-Up</dt><dd>Moves the robot with boosted speed forward</dd>
      <dt>Shift-Down</dt><dd>Moves the robot with boosted speed backwards</dd>
      <dt>Shift-Left</dt><dd>Rotates / moves the robot with boosted speed left</dd>
      <dt>Shift-Right</dt><dd>Rotates / moves the robot with boosted speed right</dd>
      <dt>Page Up</dt><dd>Moves servo up</dd>
      <dt>Page Down</dt><dd>Moves servo down</dd>
      <dt>Space</dt><dd>Stop</dd>
    </dl>

  </div>
{/template}
